<template>
    <div class='contentRole' >
        <div class='addRoleList'>
            <div class="role">
                <h2>新建角色</h2>
            </div>
            <div class="infoADD" style="margin-top:30px;">
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色名称" prop="roleDesc">
                        <el-input v-model="ruleForm.roleDesc"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述" prop="roleDescribe" >
                        <el-input type="textarea" v-model="ruleForm.roleDescribe"></el-input>
                    </el-form-item>
                        <div class="powerSelect">
                            <span><i class="iconfont" style="color:#1296db;margin-right:5px;">&#xe66a;</i>权限选择 : </span>
                            <el-tree
                                :data="parentlist"
                                :props="props"
                                node-key="id"
                                show-checkbox
                                ref="tree"
                                @check="handleCheck">
                            </el-tree>
                        </div>
                    <el-form-item style="margin-top:20%;">
                    </el-form-item>
                </el-form>
            </div>
            <div class="buttonPower">
                <!-- <el-button @click="cancelRole">取消</el-button> -->
                <el-popover
                    placement="top"
                    width="160"
                    v-model="visible2">
                    <p>确定放弃编辑？</p>
                    <div style="text-align: right; margin: 0">
                        <el-button plain type="primary" @click="visible2 = false" size="mini">取消</el-button>
                        <el-button type="primary" size="mini" @click="cancelRole">确定</el-button>
                    </div>
                    <el-button slot="reference" size="small">取消</el-button>
                </el-popover>
                  <el-button type="primary" @click="submitForm('ruleForm')" size="small">创建</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import regular from 'js/regular'
export default {
    inject:['reload'],
    data(){
        return{
            visible2: false,
            roleDesc:'',
            ruleForm:{
               roleDesc:'',
               roleDescribe:''
            },
            childArr:[],
            props: {
                label: 'label',
                children: 'children'
            },
            rules:{
                roleDesc: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                    { min: 2, max: 15, message: '长度在 2到 15 个字符', trigger: 'blur' }
                ],
            },
            arr:[],
            roleArr:[],
        }
    },
    props:{
        parentlist:{
            type:Array,
            default:[]
        }
    },
    methods:{
        handleCheck (a,b) {
            this.arr= b.checkedKeys.concat(b.halfCheckedKeys)
        },
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.roleConfirm()
                } else {
                    return false;
                }
            });
        },
        //点击确定按钮，掉接口
        roleConfirm(){

            let parmas={
                roleDesc: this.ruleForm.roleDesc,
                roleDescribe:this.ruleForm.roleDescribe,
                resourceId:this.arr
            }
            let success=data=>{
                if(data.code=="OK"){
                    this.$message.success('添加成功')
                    this.reload()
                    this.$emit('closeDialog')
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.roleAddRole(parmas,success)
        },
        cancelRole(){
            this.$emit('closeDialog')
        },

    }
}
</script>

<style lang="scss" scoped>
.contentRole{
    width:650px;
    right:0;
    height:100%;
    position: fixed;
    background:#fff;
    top:0;
    z-index:999;
    .addRoleList{
        width:650px;
        height:100%;
        .infoADD{
            overflow: auto;
            height:75%;
            box-sizing:border-box;
            padding-bottom:6% !important;
            .el-input{
                width:70%;
            }
            .el-textarea{
                width:70%;
            }
        }
        .role{
            width:100%;
            h2{
                height:60px;
                line-height: 60px;
                text-indent: 20px;
                font-size: 20px;
                border-bottom:1px solid #e8e8e8;
            }
        }
        .powerSelect{
            margin-left:30px;
            span{
                height:60px;
                display: block;
                line-height:60px;
            }
        }
        .buttonPower{
            text-align:right;
            height:80px;
            margin-bottom:8%;
           button{
               margin-right:60px;
               margin-bottom:8%;
           }
        }
    }

}

</style>
